<template>
  <!-- 选择搜索引擎 -->
  <div class="search_engines">
    <img :src="defaultSrc" alt="" @click.self.stop="changeIcon" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 经过多方寻找答案之后，终于找到了解决方法：
      // 1、在引入图片路径的时候使用require方式引入图片；
      // 2、使用ES6的import方式引入图片。
      //     //   iconSrc: [
      //     '../assets/icons/Bing.svg',
      //     '../assets/icons/baidu.svg',
      //     '../assets/icons/google-circle-fill.svg',
      //   ],
      defaultSrc: require('@/assets/icons/Bing.svg'),
      iconSrc: [
        require('@/assets/icons/Bing.svg'),
        require('@/assets/icons/baidu.svg'),
        require('@/assets/icons/google.svg'),
      ],
      IconIndex: 0,
    }
  },
  methods: {
    changeIcon() {
      this.IconIndex++
      if (this.IconIndex > this.iconSrc.length - 1) this.IconIndex = 0
      this.defaultSrc = this.iconSrc[this.IconIndex]
      this.$emit('changeEngie', this.IconIndex)
    },
  },
}
</script>

<style lang="less" scoped>
.search_engines {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: 0.1s;
  &:hover {
    transform: translateY(-50%) scale(1.1);
  }
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
